<template>
	
<div style="float: right;">
	<el-form :model="queryForm" :inline="true">
	  <el-form-item>
		<el-input v-model="queryForm.title" clearable placeholder="输入标题搜索">
			<template #append>
				<el-button type="primary" @click="forumInit()">查询</el-button>
			</template>
		</el-input>
	  </el-form-item>
	  <el-form-item>
		<el-button type="primary" @click="toPublish">发布一个</el-button>
	  </el-form-item>
	</el-form>
</div>
<div style="margin-top: 5%;">
	
	<el-row :gutter="20" v-for="list in forumList" :key="list" style="margin-top: 2%;">
		<el-col :span="6" v-for="forum in list" :key="forum">
			<el-card shadow="hover" style="max-height: 250px;" class="box-card" @click="handleDetail(forum)">
				<el-image :src="imageBaseUrl + forum.coverImage" class="" style="width: 100%; height: 150px;" fit="fill"/>
				<div style="padding: 5px">
				  <p style="width: 70%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">{{forum.title}}</p>
				  <div class="bottom">
					<time class="time">{{ forum.createTime }}</time>
					<el-text>
					  <el-icon><View /></el-icon>
					  {{forum.views}}
					</el-text>
				  </div>
				</div>
			</el-card>
		</el-col>
	</el-row>
</div>
	
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import { imageBaseUrl } from "@/global/index.js"
const { proxy } = getCurrentInstance()

let formLabelWidth = ref(80)

let forumList = ref([])
let queryForm = reactive({})
const forumInit = async () => {
	let param = Object.assign({}, queryForm)
	let result = await proxy.axios.post('forum/list', param)
	if (!result) {
	  return;
	}
	//Object.assign(forumList, result)
	forumList.value = result
}
forumInit()

const toPublish = () => {
	proxy.router.push('publish')
}

let isLike = ref(false)
const handleDetail = (forum) => {
	window.open('detail/' + forum.id)
}

</script>

<style scoped>
	.time {
	  font-size: 12px;
	  color: #999;
	}
	
	.bottom {
	  margin-top: 13px;
	  line-height: 12px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.button {
	  padding: 0;
	  min-height: auto;
	}
	
	.image {
	  width: 100%;
	  display: block;
	}
</style>